<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/28
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SCL试题操作页面</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
</head>
<body>

<%-- 上传文件时用到的div块 --%>
<div class="layui-btn-container" id="upddiv" style="display: none">
    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
    <button type="button" class="layui-btn" id="test9">开始上传</button>
</div>

<%-- 添加/编辑时用到的form表单 --%>
<form class="layui-form" action=""  id="saveSCLForm" style="display: none"  lay-filter="updateSclTitleFilter">
    <input type="hidden" name="id" id="id">
    
    <div class="registerbox-title" >添加/修改题目</div>

    <div class="layui-form-item">
        <label class="layui-form-label">试题编号</label>
        <div class="layui-input-inline">
            <input type="text" name="sclnumber" onblur="checkSclnumber(this)"  lay-verify="required"
                   placeholder="请输入试题编号" autocomplete="off"
                   class="layui-input" id="sclnumber">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">试题题目</label>
        <div class="layui-input-inline">
            <input type="text" name="scltitle"  lay-verify="required"
                   placeholder="请输入试题题目" autocomplete="off"
                   class="layui-input" id="scltitle">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项1</label>
        <div class="layui-input-inline">
            <input type="text" name="xx1"  lay-verify="required"
                   placeholder="请输入选项1" autocomplete="off"
                   class="layui-input" id="xx1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项2</label>
        <div class="layui-input-inline">
            <input type="text" name="xx2"  lay-verify="required"
                   placeholder="请输入选项2" autocomplete="off"
                   class="layui-input" id="xx2">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项3</label>
        <div class="layui-input-inline">
            <input type="text" name="xx3"  lay-verify="required"
                   placeholder="请输入选项3" autocomplete="off"
                   class="layui-input" id="xx3">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项4</label>
        <div class="layui-input-inline">
            <input type="text" name="xx4"  lay-verify="required"
                   placeholder="请输入选项4" autocomplete="off"
                   class="layui-input" id="xx4">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选项5</label>
        <div class="layui-input-inline">
            <input type="text" name="xx5"  lay-verify="required"
                   placeholder="请输入选项5" autocomplete="off"
                   class="layui-input" id="xx5">
        </div>
    </div>
    <%-- from表单中最下面的按钮 --%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveSCL">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--模糊查询的form表单--%>
<form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">试题编号</label>
        <div class="layui-input-inline">
            <input type="text" name="sclnumber" placeholder="请输入试题编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">试题题目</label>
        <div class="layui-input-inline">
            <input type="text" name="scltitle" placeholder="请输入试题题目" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 显示试题的table --%>
<table class="layui-hide" id="test" lay-filter = "test"></table>

    <%--表格中的单元格工具--%>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <%--工具栏--%>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn  layui-btn-radius layui-btn-xs layui-btn-warm layui-icon layui-icon-refresh-1" onClick="document.location.reload()"></button>

            <button class="layui-btn layui-btn-sm" lay-event="importExcel">批量导入Excel数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="addSCL">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
        </div>
    </script>

    <script>
            layui.use(['table','layer','form','jquery'], function(){
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var $ = layui.jquery;
                var upload = layui.upload,
                    element = layui.element;
                var namestatus=true;

                table.render({
                    //element 元素
                    elem: '#test',
                    page:true,
                    limit:10,
                    limits:[10,20,30,40,50,100],
                    toolbar: '#toolbarDemo',
                    url:'${pageContext.request.contextPath}/tSclSub/queryAll', //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                    cellMinWidth: 150, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    cols: [[
                        {type:'checkbox', fixed: 'left'},
                        // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                        {field:'sclnumber', title: '试题编号',width: 110, sort: true},
                        {field:'scltitle', title: '试题题目', sort: true},
                        {field:'xx1', title: '选项1',width: 100, sort: true},
                        {field:'xx2', title: '选项2',width: 100, sort: true},
                        {field:'xx3', title: '选项3',width: 100, sort: true},
                        {field:'xx4', title: '选项4',width: 100, sort: true},
                        {field:'xx5', title: '选项5',width: 100, sort: true},
                        {fixed:'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
                    ]]
                });

                //模糊查询事件
                form.on('submit(formDemo)', function(data){
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    //alert(JSON.stringify(data.field))
                    table.reload('test', {
                        //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        where: data.field,//排序字段
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                //工具栏事件(批量导入、添加)
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'getCheckData':
                            var sclnumbers=[];
                            var data = checkStatus.data;
                            if (data.length>0){
                                for (var i in data){
                                    let sclnumber = data[i].sclnumber;
                                    sclnumbers.push(sclnumber);
                                }
                                //layer.alert(JSON.stringify(sclnumbers));
                                layer.confirm('确实删除这些题目吗',function(index){
                                    $.ajax({
                                        url:"${pageContext.request.contextPath}/tSclSub/delSclnumbers/"+sclnumbers,
                                        type:"post",
                                        dataType:"JSON",
                                        success:function (ret) {
                                            if(ret.code==0){
                                                let nosclnumbers = ret.data;
                                                //alert(nosclnumbers)
                                                if (nosclnumbers!=""){
                                                    layer.msg("试题编号为"+nosclnumbers+"已被人做过未能删除，其它删除成功");
                                                }else {
                                                    layer.msg("批量删除成功")
                                                }
                                                //刷新页面
                                                table.reload('test', {
                                                    page: {
                                                        curr: 1 //重新从第 1 页开始
                                                    }
                                                });
                                            }else {
                                                layer.msg("删除失败");
                                            }
                                        }
                                    });
                                });
                            }else {
                                layer.msg("您还未勾选需要删除的题目")
                            }
                            break;
                        case 'importExcel':
                            layer.open({
                                type: 1,
                                area: ['400px', '200px'],
                                offset: '100px',
                                content:$("#upddiv"),
                                cancel: function(index, layero){

                                    layer.close(index);
                                    $("#upddiv").hide();
                                    return false;
                                }
                            });
                            //选完文件后不自动上传
                            upload.render({
                                elem: '#test8'
                                ,url: '${pageContext.request.contextPath}/tSclSub/importExcel' //此处配置你自己的上传接口即可
                                ,auto: false// 不自动上传
                                ,accept:"file" // 允许上传所有的文件
                                //,multiple: true
                                ,bindAction: '#test9' // 绑定上传的按钮
                                ,done: function(res){
                                    if(res.data==true){
                                        $("#upddiv").hide();
                                        layer.closeAll();
                                        table.reload('test');
                                        layer.msg("导入数据成功",{"icon":1});
                                    }else {
                                        $("#upddiv").hide();
                                        layer.closeAll();
                                        layer.msg("导入数据失败",{"icon":2});
                                    }
                                }
                            });
                            break;
                        case 'addSCL':
                            $("#id").attr("value",null);
                            $("#saveSCLForm")[0].reset();
                            $("#sclnumber").attr("readonly",false);
                            $("#sclnumber").attr("onblur","checkSclnumber(this)");
                            layer.open({
                                type: 1,
                                area: ['350px', '350px'],
                                offset: '100px',
                                content:$("#saveSCLForm"),
                                cancel: function(index, layero){
                                    layer.close(index);
                                    $("#saveSCLForm").hide();
                                    return false;
                                }
                            });
                            break;
                    };
                })

                //监听行工具（编辑修改）事件
                //触发单元格工具事件
                table.on('tool(test)', function(obj){
                    var data=obj.data;
                    switch(obj.event){
                        case 'edit'://编辑
                            $("#sclnumber").attr("readonly",true);
                            $("#sclnumber").attr("onblur","");
                            layer.open({
                                type: 1,
                                area: ['350px', '350px'],
                                offset: '100px',
                                content:$("#saveSCLForm"),
                                cancel: function(index, layero){
                                    layer.close(index);
                                    $("#saveSCLForm").hide();
                                    return false;
                                }
                            });
                            form.val('updateSclTitleFilter',data);
                            break;
                        case 'del'://删除
                            layer.confirm('确实删除该题目吗', function(index){
                                //alert(JSON.stringify(data.sclnumber));
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/tSclSub/delSclTitle/"+data.sclnumber,
                                    type:"delete",
                                    dataType:"JSON",
                                    success:function (ret) {
                                        if(ret.data==true){
                                            //关闭所有弹框
                                            layer.closeAll();
                                            layer.msg("删除成功");
                                            //刷新页面
                                            //table.reload('test');
                                            table.reload('test', {
                                                page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            });
                                        }else {
                                            layer.msg("删除失败,该题目已经有人做过");
                                        }
                                    }
                                });
                            });
                            break;
                        };
                });

                //监听 提交
                //Layui提交表单  data代表的是form表单里面的所有的内容
                form.on('submit(formSaveSCL)', function(data){
                    //layer.alert(JSON.stringify(data.field));
                    if(namestatus){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/tSclSub/addOrUpdataSCLTitle",
                            type:"post",
                            dataType:"JSON",
                            data:data.field,//表单里所有数据
                            success:function (ret){
                                if (ret.data == true){
                                    //关闭所有弹框
                                    layer.closeAll();
                                    layer.msg("提交成功")
                                    //刷新页面
                                    table.reload('test');
                                }
                            }
                        })
                    }
                    return false;
                });

                //添加时，对试题编号进行校验
                checkSclnumber=function (obj){
                    namestatus=true;
                    $.ajax({
                        url:'${pageContext.request.contextPath}/tSclSub/'+obj.value,
                        type:"post",
                        success:function(d){
                            //alert(d.data);
                            if(d.data==false){
                                namestatus=false;
                                layer.msg("该试题编号已存在");
                            }
                        }
                    })
                }
            });
    </script>
</body>
</html>
